<template>
  <!-- 找回密码 -->
  <div :class="['passwordRecovery', { mobile: $isMobile }]">
    <div
      class="head flexcc"
      @click="openUrl('/')"
    >
      <img
        v-if="!$isMobile"
        src="@/assets/img/fleetmanagers.net.png"
        alt=""
      />
      <img
        v-else
        src="@/assets/img/fleetmanagers.net_2.png"
        alt=""
      />
    </div>
    <div class="flexcs-col">
      <div class="con">
        <div class="title flexcc">{{ t('passwordRecovery.title') }}</div>
        <el-form
          class="mt-3"
          ref="formEl"
          label-position="top"
          :model="formData"
          :rules="rules"
        >
          <el-form-item
            :label="t('passwordRecovery.l1')"
            prop="userName"
          >
            <el-input v-model="formData.userName"></el-input>
          </el-form-item>
          <el-form-item
            :label="t('passwordRecovery.l2')"
            prop="email"
          >
            <el-input v-model.trim="formData.email"></el-input>
          </el-form-item>
          <el-form-item
            :label="t('passwordRecovery.l3')"
            prop="code"
          >
            <div class="codeitem">
              <el-input v-model.trim="formData.code"></el-input>
              <el-button
                v-if="!isSend"
                class="btn2"
                type="primary"
                @click="handleSend"
              >
                {{ t('passwordRecovery.btn1') }}
              </el-button>
              <el-button
                v-else
                class="btn2"
                disabled
              >
                {{ t('passwordRecovery.btn2') }}({{ num }})
              </el-button>
            </div>
          </el-form-item>
          <el-form-item
            :label="t('passwordRecovery.l4')"
            prop="password"
          >
            <el-input
              v-model.trim="formData.password"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="t('passwordRecovery.l5')"
            prop="password_r"
          >
            <el-input
              v-model.trim="formData.password_r"
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="flexcc mt-7">
          <el-button
            class="btn"
            type="primary"
            @click="handleSubmit"
          >
            {{ t('passwordRecovery.btn3') }}
          </el-button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Footer from '@/views/layout/Footer.vue'
import { useI18n } from 'vue-i18n'
import { captchaEmailApi, forgotPasswordApi } from '@/service/login'
import { openUrl } from '@/utils'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const route = useRoute()

const { t, locale } = useI18n()

// 表单
const formEl = ref(null)
const formData = ref({
  userName: '',
  email: '',
  code: '',
  password: '',
  uuid: ''
})
const passwordReg = /^(?![^a-zA-Z]+$)(?!\D+$).{6,30}$/ // 密码强度正则 6-30位字母和数字
const validator = {
  email: (rule, value, callback) => {
    if (!value) {
      callback(new Error(t('passwordRecovery.r2-1')))
    } else {
      const reg = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (!reg.test(value)) {
        callback(new Error(t('passwordRecovery.r2-2')))
      }
      callback()
    }
  },
  password: (rule, value, callback) => {
    if (!value) {
      callback(new Error(t('passwordRecovery.r4')))
    } else {
      if (!passwordReg.test(value)) {
        callback(new Error(t('passwordRecovery.r4_1')))
        return
      }
      if (formData.value.password_r) {
        if (value !== formData.value.password_r) {
          callback(new Error(t('passwordRecovery.r5_1')))
        } else {
          formEl.value.clearValidate('password_r')
        }
      }
      callback()
    }
  },
  password_r: (rule, value, callback) => {
    if (!value) {
      callback(new Error(t('passwordRecovery.r5')))
    } else {
      if (!passwordReg.test(value)) {
        callback(new Error(t('passwordRecovery.r4_1')))
        return
      }
      if (formData.value.password) {
        if (value !== formData.value.password) {
          callback(new Error(t('passwordRecovery.r5_1')))
        } else {
          formEl.value.clearValidate('password')
        }
      }
      callback()
    }
  }
}
const rules = ref({
  userName: [{ required: true, message: t('passwordRecovery.r1'), trigger: ['blur', 'change'] }],
  email: [{ required: true, validator: validator.email, trigger: ['blur', 'change'] }],
  code: [{ required: true, message: t('passwordRecovery.r3'), trigger: ['blur', 'change'] }],
  password: [{ required: true, validator: validator.password, trigger: ['blur', 'change'] }],
  password_r: [{ required: true, validator: validator.password_r, trigger: ['blur', 'change'] }]
})

// 发送验证码
const num = ref(60)
let timer = null
const isSend = ref(false)
const handleSend = () => {
  if (!formEl.value) return
  formEl.value.validateField(['userName', 'email'], (valid) => {
    if (valid) {
      captchaEmailApi({
        userName: formData.value.userName,
        email: formData.value.email
      }).then(({ uuid }) => {
        isSend.value = true
        formData.value.uuid = uuid

        timer = setInterval(() => {
          num.value--
          if (num.value <= 0) {
            clearTimeout(timer)
            isSend.value = false
            num.value = 60
          }
        }, 1000)
      })
    }
  })
}

// 提交
const handleSubmit = () => {
  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      forgotPasswordApi(formData.value).then(({ msg }) => {
        ElMessage.success(msg)
      })
    }
  })
}
</script>

<style scoped lang="scss">
.passwordRecovery {
  background: #f5f5f5;

  --el-component-size: 45px;
  --el-color-primary: var(--titleColor);
  --el-text-color-regular: var(--titleColor);
  --el-color-primary-light-3: var(--titleColor);
  --el-color-primary-dark-2: #000;

  .head {
    height: 108px;
    border-bottom: 6px solid var(--titleColor);
    img {
      height: 32px;
    }
  }

  .title {
    font-size: 30px;
    font-weight: bold;
  }
  .con {
    width: 381px;
    min-height: 400px;
    padding: 70px 0 0;
    .codeitem {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 120px;
      gap: 20px;
      justify-content: space-between;
      .btn2 {
        width: auto;
        height: 46px;
      }
    }
    .btn {
      width: 260px;
      height: 46px;
    }
  }

  &.mobile {
    background: #fff;
    .head {
      height: 50px;
      background: var(--mainColor);
      color: #fff;
      border-bottom: 0;
      img {
        height: 20px;
      }
    }

    .con {
      padding: 40px;
    }
  }
}
</style>
